<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

     <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
            <el-col :span="7">
                <el-input
                v-model="queryInfo.query"
                placeholder="请输入用户姓名"
                class="input-with-select"
                @keyup.enter.native="getOrdersList"
                clearable
                ></el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="getOrdersList">搜索</el-button>
            </el-col>
        </el-row>

          <!-- 数据展示区域 -->
        <el-table :data="orderList" style="width: 100%" border stripe>
            <el-table-column type="index" fixed label="#"></el-table-column>
            <el-table-column label="订单编号">
            <template #default="scope">{{ scope.row.order_number }}</template>
            </el-table-column>
            <el-table-column label="订单价格(元)" width="150">
            <template #default="scope">{{ scope.row.order_price }}</template>
            </el-table-column>
            <el-table-column label="是否付款" width="120">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.pay_status == '1'">已付款</el-tag>
                    <el-tag type="danger" v-else>未付款</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否发货" width="80">
            <template #default="scope">{{ scope.row.is_send }}</template>
            </el-table-column>
            <el-table-column label="下单时间" width="180">
            <template #default="scope">{{ $filters.dateFormat(scope.row.create_time) }}</template>
            </el-table-column>
            
            <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-tooltip content="修改订单地址" placement="top" effect="light" >
                    <el-button type="primary" size="small" @click="openAddressVisible" > 编辑</el-button>
                </el-tooltip>
                <el-button type="success" size="small" @click="showProgressVisible(scope.row)">查看物流</el-button>
            </template>
            </el-table-column>
        </el-table>

        <!-- 分区域 -->
        <el-pagination
            v-model:currentPage="queryInfo.pagenum"
            v-model:page-size="queryInfo.pagesize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </el-card>

    <!-- 修改地址对话框 -->
    <el-dialog v-model="addriessVisible" title="修改订单地址"   width="50%"  >
        <el-form :model="addressForm" label-width="100px" :rules="addressFormRules" ref="addressFormRef">
            <el-form-item label="省市区/县" prop="address1">
                <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
            </el-form-item>
             <el-form-item label="省市区/县" prop="address2">
                <el-input ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="addriessVisibleClose">取消</el-button>
            <el-button type="primary" @click="addriessVisible = false">确认</el-button>
        </span>
        </template>
  </el-dialog>

      <!-- 查看物流 -->
    <el-dialog v-model="progressVisible" title="物流状态"   width="50%"  @close="progressVisibleClose">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in progressInfo"
          :key="index"
          :timestamp="activity.time"
          size="normal"
          type="success"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

  </div>
</template>

<script>
import axios from '../../http/axios.js'

import cityData from './citydata.js'
import progressData  from './progress.js'

export default {
  name: 'Order',
  data() {
    return {
      queryInfo: {
        query: '',
        pagesize: 10,
        pagenum: 1,
      },
      orderList: [], // 订单数据列表
      total: 0,
      addriessVisible: false,
      addressForm: {
        address1: [],
        address2: ''
      },
      addressFormRules: {
        address1: [
            {required: true, message: '请选择省市区县', trigger: 'blur'}
        ],
        address2: [
            {required: true, message: '请输入详细地址', trigger: 'blur'}
        ]
      },
      cityData: cityData,
      progressVisible: false, // 物流对话框的显示
      progressInfo: [],
    }
  },
  created() {
    this.getOrdersList()
  },
  methods: {
    async getOrdersList() {
      const { data: res } = await axios.get('orders', {
        params: this.queryInfo,
      })
      if (res.meta.status !== 200) {
        this.$message.error('获取订单失败')
      } else {
        this.orderList = res.data.goods
        this.total = res.data.total
      }
    },
    handleSizeChange(nweSize) {// 分页改变每页数据个数
      this.queryInfo.pagesize = nweSize
      this.getOrdersList()
    },
    handleCurrentChange(newPagenum) {// 切换页数
      this.queryInfo.pagenum = newPagenum
      this.getOrdersList()
    },
    openAddressVisible(){
        this.addriessVisible = true;
    },
    addriessVisibleClose(){ // 重置修改地址弹窗数据
      this.$refs.addressFormRef.resetFields();
      this.addriessVisible = false;  
    },
    progressVisibleClose(){ // 关闭物流弹窗
      this.progressVisible = false;
    },
    async showProgressVisible(row){ // 显示物流弹窗
      const res = progressData;

      if(res.meta.status !== 200){
        this.$message.error('获取物流信息失败');
      }else{
        this.progressInfo = res.data;
      }
      this.progressVisible = true;
    }
  },
}
</script>

<style lang="less" scoped>
.el-cascader{
  width: 100% !important;
}
</style>